<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="site" content="" />
    <title>Novem</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <script type="module" src="src/main.js"></script>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
    />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="manifest" href="/assets/manifest.json" />
    <link
      rel="icon"
      type="image/png"
      sizes="192x192"
      href="/assets/app-icons/icon-192x192.png"
    />
    <link
      rel="apple-touch-icon"
      type="image/png"
      sizes="180x180"
      href="/assets/app-icons/icon-180x180.png"
    />
  </head>
  <body class="stretched">
    <main id="wrapper">
      <div id="top-bar">
        <div class="container">
          <div class="row justify-content-between">
            <div class="col-auto">
              <div class="top-links">
                <a
                  href="http://www.zcu.edu.cn"
                  target="_blank"
                  rel="noopener noreferrer"
                  >学生</a
                >
                <a
                  href="http://www.zcu.edu.cn"
                  target="_blank"
                  rel="noopener noreferrer"
                  >教职工</a
                >
              </div>
            </div>
            <div class="col-auto topbar-tools"></div>
          </div>
        </div>
      </div>

      <header id="header" data-mobile-sticky="true">
        <div id="header-wrap">
          <div class="container">
            <div class="header-row">
              <div id="logo">
                <a href="#" title="#" target="_blank" rel="noopener noreferrer">
                  <img src="/assets/images/logo.png" alt="#" />
                </a>
              </div>
              <div class="primary-menu-trigger">
                <button class="nvm-hamburger" type="button" title="移动端导航">
                  <span class="nvm-hamburger-box">
                    <span class="nvm-hamburger-inner"></span>
                  </span>
                </button>
              </div>
              <nav class="primary-menu mobile-menu-overlay">
                <ul class="menu-container">
                  <li class="menu-item">
                    <div class="menu-link">
                      <a href="#1" rel="noopener noreferrer">首页</a>
                    </div>
                  </li>
                  <li class="menu-item">
                    <div class="menu-link">
                      <a href="#2" rel="noopener noreferrer">下拉菜单</a>
                    </div>
                    <ul class="sub-menu-container">
                      <li class="menu-item">
                        <div class="menu-link"><a href="#21">子菜单1</a></div>

                        <ul class="sub-menu-container">
                          <li class="menu-item">
                            <div class="menu-link">
                              <a href="#211">子菜单11</a>
                            </div>
                            <ul class="sub-menu-container">
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                      <li class="menu-item">
                        <div class="menu-link">
                          <a href="#21">测试二级菜单长度</a>
                        </div>

                        <ul class="sub-menu-container">
                          <li class="menu-item">
                            <div class="menu-link">
                              <a href="#211">子菜单11</a>
                            </div>
                            <ul class="sub-menu-container">
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                      <li class="menu-item">
                        <div class="menu-link"><a href="#21">子菜单1</a></div>

                        <ul class="sub-menu-container">
                          <li class="menu-item">
                            <div class="menu-link">
                              <a href="#211">子菜单11</a>
                            </div>
                            <ul class="sub-menu-container">
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                      <li class="menu-item">
                        <div class="menu-link"><a href="#21">子菜单1</a></div>

                        <ul class="sub-menu-container">
                          <li class="menu-item">
                            <div class="menu-link">
                              <a href="#211">子菜单11</a>
                            </div>
                            <ul class="sub-menu-container">
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                      <li class="menu-item">
                        <div class="menu-link"><a href="#21">子菜单1</a></div>

                        <ul class="sub-menu-container">
                          <li class="menu-item">
                            <div class="menu-link">
                              <a href="#211">子菜单11</a>
                            </div>
                            <ul class="sub-menu-container">
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                              <li class="menu-item">
                                <div class="menu-link">
                                  <a href="#2111">子菜单111</a>
                                </div>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li class="menu-item">
                    <div class="menu-link">
                      <a href="#3" rel="noopener noreferrer">下拉菜单</a>
                    </div>
                  </li>
                  <li class="menu-item">
                    <div class="menu-link">
                      <a href="#4" rel="noopener noreferrer">下拉菜单</a>
                    </div>
                  </li>
                  <li class="menu-item">
                    <div class="menu-link">
                      <a href="#5" rel="noopener noreferrer">下拉菜单</a>
                    </div>
                  </li>
                  <li class="menu-item">
                    <div class="menu-link">
                      <a href="#6" rel="noopener noreferrer">下拉菜单</a>
                    </div>
                  </li>
                  <li class="menu-item">
                    <div class="menu-link">
                      <a href="#7" rel="noopener noreferrer">下拉菜单</a>
                    </div>
                  </li>
                  <li class="menu-item">
                    <div class="menu-link">
                      <a href="#8" rel="noopener noreferrer">下拉菜单</a>
                    </div>
                  </li>
                  <li class="menu-item">
                    <div class="menu-link">
                      <a href="#9" rel="noopener noreferrer">下拉菜单</a>
                    </div>
                  </li>
                  <li class="menu-item">
                    <div class="menu-link">
                      <a href="#10" rel="noopener noreferrer">下拉菜单</a>
                    </div>
                  </li>
                  <li class="menu-item">
                    <div class="menu-link">
                      <a href="#11" rel="noopener noreferrer">下拉菜单</a>
                    </div>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </header>

      <section id="banner" class="slider-element" data-swiper-options="{}">
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="video-wrap no-placeholder">
                <video
                  preload="auto"
                  loop
                  autoplay
                  muted
                  playsinline
                  poster="/assets/images/home/banner/3-poster.jpg"
                >
                  <source src="/assets/videos/campus.mp4" type="video/mp4" />
                </video>
                <div
                  class="video-overlay"
                  style="background-color: rgba(0, 0, 0, 0)"
                ></div>
              </div>
            </div>
          </div>

          <!-- <div class="swiper-pagination"></div>

          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div> -->
          <a href="#" data-scrollto="#content" class="slide-down"
            ><i class="novem-icons nvm-icon-chevron-right icon-rotate-90"></i>
          </a>
        </div>
      </section>

      <section id="content" class="touchpoint">
        <div class="section" id="album">
          <div class="container">
            <div class="row" data-animate="animate__fadeInUp">
              <div class="col-12">
                <div class="title-block">
                  <div>
                    Campus
                    <span class="last-word">Landscape</span>
                  </div>
                  <h2>校园美图</h2>
                </div>
              </div>
            </div>
            <div class="album row g-3" data-animate="animate__fadeInUp">
              <div class="col-lg-5">
                <a href="#" class="card border-0 album-item h-100">
                  <img
                    src="/assets/images/page/campus/1-3.jpg"
                    alt="校园美景"
                  />

                  <div
                    class="intro px-1 px-lg-3 d-flex justify-content-between align-items-center"
                  >
                    <h5 class="fs-lg mb-0">校园美景</h5>
                    <span>
                      进入相册
                      <i
                        class="novem-icons novem-icons nvm-icon-arrow-right icon-beat-fade"
                      ></i>
                    </span>
                  </div>
                </a>
              </div>
              <div class="col-lg-7">
                <div class="row g-3">
                  <div class="col-6">
                    <a href="#" class="card border-0 album-item h-100">
                      <img
                        src="/assets/images/page/campus/2-1.jpg"
                        alt="学习空间"
                      />

                      <div
                        class="intro px-1 px-lg-3 d-flex justify-content-between align-items-center"
                      >
                        <h5 class="fs-lg mb-0">学习空间</h5>
                        <span>
                          进入相册
                          <i
                            class="novem-icons novem-icons nvm-icon-arrow-right icon-beat-fade"
                          ></i>
                        </span>
                      </div>
                    </a>
                  </div>
                  <div class="col-6">
                    <a href="#" class="card border-0 album-item">
                      <img
                        src="/assets/images/page/campus/3-1.jpg"
                        alt="运动空间"
                      />

                      <div
                        class="intro px-1 px-lg-3 d-flex justify-content-between align-items-center"
                      >
                        <h5 class="fs-lg mb-0">运动空间</h5>
                        <span>
                          进入相册
                          <i
                            class="novem-icons novem-icons nvm-icon-arrow-right icon-beat-fade"
                          ></i>
                        </span>
                      </div>
                    </a>
                  </div>
                  <div class="col-12">
                    <a href="#" class="card border-0 album-item">
                      <img
                        src="/assets/images/page/campus/4-2.jpg"
                        alt="生活空间"
                      />

                      <div
                        class="intro px-1 px-lg-3 d-flex justify-content-between align-items-center"
                      >
                        <h5 class="fs-lg mb-0">生活空间</h5>
                        <span>
                          进入相册
                          <i
                            class="novem-icons novem-icons nvm-icon-arrow-right icon-beat-fade"
                          ></i>
                        </span>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="section" id="cooperation">
          <div class="container">
            <div class="row" data-animate="animate__fadeInUp">
              <div class="col-12">
                <div class="title-block">
                  <div>
                    Campus
                    <span class="last-word">LANDSCAPE</span>
                  </div>
                  <h2>环境资讯</h2>
                </div>
              </div>
              <div class="col-12" data-animate="animate__fadeInUp">
                <div
                  class="slider-element"
                  data-swiper-options="{'autoplay':{'delay':1200},'breakpoints': {'0': {'slidesPerView': 1,'spaceBetween': 10},'768': {'slidesPerView': 2,'spaceBetween': 20},'992': {'slidesPerView': 3,'spaceBetween': 20},'1200': {'slidesPerView': 4,'spaceBetween': 20}},'loop': true,'navigation': {'prevEl': '.swiper-button-prev','nextEl': '.swiper-button-next'}}"
                >
                  <div class="swiper">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <a
                          href="https://mp.weixin.qq.com/s/g83NPvAXS6hrwDcCGU6HWQ?mpshare=1&scene=1&srcid=0221GAvOCL9ZIN7d7eF1zFQG&sharer_shareinfo=fd04a94afb04c69ca7986d54202f2443&sharer_shareinfo_first=fd04a94afb04c69ca7986d54202f2443&version=4.1.32.70477&platform=mac&nwr_flag=1#wechat_redirect"
                          class="card h-100 border-0 shadow-sm mx-2"
                          target="_blank"
                        >
                          <img
                            src="/assets/images/page/campus/6.jpg"
                            alt="春日浪漫｜Let's在花团锦簇里自拍一个吧！"
                            class="card-img-top"
                          />
                          <div class="card-body pb-4">
                            <h3 class="h6 mb-4">
                              春日浪漫｜Let's在花团锦簇里自拍一个吧！
                            </h3>

                            <p class="fs-sm mb-0">
                              三月是一个充满希望和憧憬的月份，阳光透过云层洒在大地上，莺飞草长，春意渐浓，南风暖窗，桃红柳绿，春天已经如约而至，校园鲜花烂漫，一片勃勃生机。
                            </p>
                          </div>
                        </a>
                      </div>

                      <div class="swiper-slide">
                        <a
                          href="https://mp.weixin.qq.com/s?__biz=MzA5OTg2OTE1Ng==&mid=2651009261&idx=1&sn=b0eb67bf82cf572139662d4255b01059&chksm=8ada108ffc558e8a9e86e63e13681b2604ebf72c940ac4a00e383bf04c3106db57b1e0550f11&mpshare=1&scene=1&srcid=02210OMs0YQW8FGpJqmCCTYz&sharer_shareinfo=a9e7915fe0f21293c0d3a94c4185c6a8&sharer_shareinfo_first=a9e7915fe0f21293c0d3a94c4185c6a8&version=4.1.31.70466&platform=mac&nwr_flag=1#wechat_redirect"
                          class="card h-100 border-0 shadow-sm mx-2"
                          target="_blank"
                        >
                          <img
                            src="/assets/images/page/campus/1.jpg"
                            alt="和你一起，走过城院的春夏秋冬"
                            class="card-img-top"
                          />
                          <div class="card-body pb-4">
                            <h3 class="h6 mb-4">
                              和你一起，走过城院的春夏秋冬
                            </h3>

                            <p class="fs-sm mb-0">
                              春去秋来，寒暑更迭。人间烟火温暖依旧，故事连绵不绝。城院在四季轮回中，散发着它的独特魅力。城院学子们也共同在岁月中穿行，不负韶华，不负初心。
                            </p>
                          </div>
                        </a>
                      </div>
                      <div class="swiper-slide">
                        <a
                          href="https://mp.weixin.qq.com/s?__biz=MzA5OTg2OTE1Ng==&mid=2650957777&idx=1&sn=d45c0cde242d2d8588b2d6e5f837ba56&chksm=8ad34ac907e2ad3b5d748b23a8e32db680094f85cbb2c616d84cf5579bda3d2fec78328c9059&mpshare=1&scene=1&srcid=0221kZHSHWjG8WTaRqgqYx4b&sharer_shareinfo=8dd6442c27c3779eafdf41e06b534be9&sharer_shareinfo_first=8dd6442c27c3779eafdf41e06b534be9&version=4.1.31.70466&platform=mac&nwr_flag=1&poc_token=HFxBuGejIU8GxGpR2CvdRE4oMoeWmDNczVuUkmqI"
                          class="card h-100 border-0 shadow-sm mx-2"
                          target="_blank"
                        >
                          <img
                            src="/assets/images/page/campus/2.jpg"
                            alt="好想跟你见一面，在这人间最美四月天"
                            class="card-img-top"
                          />
                          <div class="card-body pb-4">
                            <h3 class="h6 mb-4">
                              好想跟你见一面，在这人间最美四月天
                            </h3>

                            <p class="fs-sm mb-0">
                              人间四月天，春色满校园。万里而来的暖风，摇曳着裙摆。送走烟雨，迎来晴空，春天藏在花团锦簇间，藏在清风徐徐里，藏在学子们的相机中。
                            </p>
                          </div>
                        </a>
                      </div>
                      <div class="swiper-slide">
                        <a
                          href="https://mp.weixin.qq.com/s?__biz=MzA5OTg2OTE1Ng==&mid=2650902437&idx=1&sn=2ee0ce1a4ceaab096c0c87c6a88b4227&chksm=8aea4f871795d55868e60bd79fcc514444f9fbc28560b034d8f782fad68b91a23defec28e661&mpshare=1&scene=1&srcid=0221lGEfCQxizppuVWHp87fd&sharer_shareinfo=2e1ddcc3196512cae1a6f2c0266ec6d8&sharer_shareinfo_first=2e1ddcc3196512cae1a6f2c0266ec6d8&version=4.1.31.70466&platform=mac&nwr_flag=1#wechat_redirect"
                          class="card h-100 border-0 shadow-sm mx-2"
                          target="_blank"
                        >
                          <img
                            src="/assets/images/page/campus/3.jpg"
                            alt="秋日城院，邂逅美好"
                            class="card-img-top"
                          />
                          <div class="card-body pb-4">
                            <h3 class="h6 mb-4">秋日城院，邂逅美好</h3>

                            <p class="fs-sm mb-0">
                              一叶知秋，树树秋声。透过秋日看校园，银杏叶泛黄，桂花香扑鼻。城院校园的朦胧和浪漫，一下子扑进我们的心里。动人的秋韵便在城院的画卷上徐徐展开。
                            </p>
                          </div>
                        </a>
                      </div>

                      <div class="swiper-slide">
                        <a
                          href="https://mp.weixin.qq.com/s?__biz=MzA5OTg2OTE1Ng==&mid=2651010428&idx=1&sn=cc062644dc5a04024247817b08e4dcad&chksm=8ac5fe85ab2b147a2e4ff417ecfa275e4f30527bda7386ef2b0893e8b1f4bf2b4cce2fb170c5&mpshare=1&scene=1&srcid=0221tq9VoIpB7PCv6DPp5sSs&sharer_shareinfo=89ce88de43286604f460eb6173c32595&sharer_shareinfo_first=89ce88de43286604f460eb6173c32595&version=4.1.31.70466&platform=mac&nwr_flag=1#wechat_redirect"
                          class="card h-100 border-0 shadow-sm mx-2"
                          target="_blank"
                        >
                          <img
                            src="/assets/images/page/campus/5.jpg"
                            alt="专属壁纸！定格最美的城院"
                            class="card-img-top"
                          />
                          <div class="card-body pb-4">
                            <h3 class="h6 mb-4">专属壁纸！定格最美的城院</h3>

                            <p class="fs-sm mb-0">
                              眼里有光，心中有梦。城院的一草一木，点点滴滴，在心中描摹。行走在城院校园里，阳光与风同行，一场美不胜收的视觉盛宴，最美的风景就在身边。
                            </p>
                          </div>
                        </a>
                      </div>
                    </div>

                    <div class="swiper-btn swiper-btn-1">
                      <div class="swiper-button-prev"></div>
                      <div class="swiper-button-next"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="section" id="video">
          <div class="container">
            <div class="row">
              <div class="col-12" data-animate="animate__fadeInUp">
                <div class="title-block">
                  <div>
                    Campus
                    <span class="last-word">Video</span>
                  </div>
                  <h2>精彩视频</h2>
                </div>
              </div>
              <div class="col-12 col-lg-10 offset-lg-1 mb-3">
                <div
                  class="slider-element"
                  data-animate="animate__fadeInUp"
                  id="campus-video"
                  data-swiper-options="{'slidesPerView': 1,'effect':'fade','loop': true,'pagination': {'el': '.swiper-pagination','clickable': true},'navigation': {'prevEl': '.swiper-button-prev','nextEl': '.swiper-button-next','disabledClass': 'swiper-button-disabled'},'thumbs':{'swiper':'#video-thumb'}}"
                >
                  <div class="swiper px-lg-6 pb-3">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <div class="media-wrap">
                          <div class="video-container">
                            <video
                              preload="auto"
                              controls=""
                              class="card border-0"
                            >
                              <source
                                src="assets/videos/1.mp4"
                                type="video/mp4"
                              />
                            </video>
                          </div>
                          <div class="media-trigger-playback">
                            <i></i>
                          </div>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div class="media-wrap">
                          <div class="video-container">
                            <video
                              preload="auto"
                              controls=""
                              class="card border-0"
                            >
                              <source
                                src="assets/videos/2.mp4"
                                type="video/mp4"
                              />
                            </video>
                          </div>
                          <div class="media-trigger-playback">
                            <i></i>
                          </div>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div class="media-wrap">
                          <div class="video-container">
                            <video
                              preload="auto"
                              controls=""
                              class="card border-0"
                            >
                              <source
                                src="assets/videos/3.mp4"
                                type="video/mp4"
                              />
                            </video>
                          </div>
                          <div class="media-trigger-playback">
                            <i></i>
                          </div>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div class="media-wrap">
                          <div class="video-container">
                            <video
                              preload="auto"
                              controls=""
                              class="card border-0"
                            >
                              <source
                                src="assets/videos/4.mp4"
                                type="video/mp4"
                              />
                            </video>
                          </div>
                          <div class="media-trigger-playback">
                            <i></i>
                          </div>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div class="media-wrap">
                          <div class="video-container">
                            <video
                              preload="auto"
                              controls=""
                              class="card border-0"
                            >
                              <source
                                src="assets/videos/5.mp4"
                                type="video/mp4"
                              />
                            </video>
                          </div>
                          <div class="media-trigger-playback">
                            <i></i>
                          </div>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div class="media-wrap">
                          <div class="video-container">
                            <video
                              preload="auto"
                              controls=""
                              class="card border-0"
                            >
                              <source
                                src="assets/videos/campus.mp4"
                                type="video/mp4"
                              />
                            </video>
                          </div>
                          <div class="media-trigger-playback">
                            <i></i>
                          </div>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div class="media-wrap">
                          <div class="video-container">
                            <video
                              preload="auto"
                              controls=""
                              class="card border-0"
                            >
                              <source
                                src="assets/videos/apartment.mp4"
                                type="video/mp4"
                              />
                            </video>
                          </div>
                          <div class="media-trigger-playback">
                            <i></i>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                  </div>
                </div>
              </div>

              <div
                class="slider-element"
                data-animate="animate__fadeInUp"
                data-swiper-options="{'breakpoints': {'0': {'slidesPerView': 3,'spaceBetween': 10},'768': {'slidesPerView': 4,'spaceBetween': 10},'1200': {'slidesPerView': 5,'spaceBetween': 10}},'loop': true,'pagination': {'el': '.swiper-pagination','clickable': true},'freeMode': true,'watchSlidesProgress': true}"
              >
                <div class="swiper" id="video-thumb">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide card border-0">
                      <div class="thumb">
                        <img src="/assets/images/page/campus/v1.jpg" alt="" />
                        <div class="info">视频标题视频标题</div>
                      </div>
                    </div>
                    <div class="swiper-slide card border-0">
                      <div class="thumb">
                        <img src="/assets/images/page/campus/v2.jpg" alt="" />
                        <div class="info">视频标题视频标题</div>
                      </div>
                    </div>
                    <div class="swiper-slide card border-0">
                      <div class="thumb">
                        <img src="/assets/images/page/campus/v3.jpg" alt="" />
                        <div class="info">视频标题视频标题</div>
                      </div>
                    </div>
                    <div class="swiper-slide card border-0">
                      <div class="thumb">
                        <img src="/assets/images/page/campus/v4.jpg" alt="" />
                        <div class="info">视频标题视频标题</div>
                      </div>
                    </div>
                    <div class="swiper-slide card border-0">
                      <div class="thumb">
                        <img src="/assets/images/page/campus/v5.jpg" alt="" />
                        <div class="info">视频标题视频标题</div>
                      </div>
                    </div>
                    <div class="swiper-slide card border-0">
                      <div class="thumb">
                        <img src="/assets/images/page/campus/v6.jpg" alt="" />
                        <div class="info">视频标题视频标题</div>
                      </div>
                    </div>
                    <div class="swiper-slide card border-0">
                      <div class="thumb">
                        <img src="/assets/images/page/campus/v7.jpg" alt="" />
                        <div class="info">视频标题视频标题</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="section vr">
          <div class="container">
            <div class="row">
              <div class="col-12" data-animate="animate__fadeInUp">
                <div class="title-block">
                  <div>
                    Panoramic
                    <span class="last-word">Photo</span>
                  </div>
                  <h2>云游城院</h2>
                </div>
              </div>
              <div class="col-12" data-animate="animate__fadeInUp">
                <div
                  class="card border-0 panorama-container"
                  id="vr"
                  data-panorama="/assets/images/home/panorama.jpg"
                >
                  <a
                    href="https://www.720yun.com/t/d7vk6m8mO79"
                    target="_blank"
                    class="vr720-link"
                  >
                    <div
                      class="icon"
                      style="background: rgba(255, 255, 255, 0.37)"
                    >
                      <img
                        alt="云游城院"
                        src=""
                      />
                    </div>
                    <div class="title">云游城院</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer id="footer">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-md-4 col-lg-3 text-center text-md-start">
              <img
                src="/assets/images/logo-dark.png"
                alt="郑州城市职业学院"
                class="logo img-fluid"
              />
            </div>

            <div class="col-md-8 col-lg-4 text-center text-md-start">
              中国 · 河南 · 郑州<br />
              电话：0371-69213333 0371-68506666（招生咨询）<br />
              邮箱：zzcszyxy618@163.com<br />
              版权所有 © 2023 郑州城市职业学院<br />

              <div class="py-2">
                <a
                  href="https://beian.miit.gov.cn/"
                  target="_blank"
                  rel="noopener"
                >
                  豫ICP备12014925号-1
                </a>
                /
                <a
                  href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41018302000187"
                  target="_blank"
                  rel="noopener"
                >
                  豫公网安备 41018302000187号
                </a>
              </div>
            </div>
            <div class="col-md-8 offset-md-2 col-lg-5 offset-lg-0 text-center">
              <div class="row">
                <div class="col-3">
                  <img
                    src="/assets/images/social/weixin.jpg"
                    alt="官方微信公众号"
                    class="img-fluid"
                  />
                  <br />
                  <a
                    href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzA5OTg2OTE1Ng==&amp;action=getalbum&amp;album_id=2393721616590782469&amp;scene=126#wechat_redirect"
                    target="_blank"
                    title="官方微信公众号"
                    rel="noopener"
                    >官方微信公众号</a
                  >
                </div>
                <div class="col-3">
                  <img
                    src="/assets/images/social/weibo.jpg"
                    alt="官方微博"
                    class="img-fluid"
                  />
                  <br />
                  <a
                    href="https://weibo.com/u/7674037481"
                    target="_blank"
                    title="官方微博"
                    rel="noopener"
                  >
                    官方微博
                  </a>
                </div>
                <div class="col-3">
                  <img
                    src="/assets/images/social/douyin.jpg"
                    alt="官方抖音"
                    class="img-fluid"
                  />
                  <br />
                  <a
                    href="https://www.douyin.com/user/MS4wLjABAAAA-mZeYz7hw538fARR5-TR4kWrgXUvTimwVBNRwuS56dFTdjo5f9umgGEbrcdeXxud"
                    target="_blank"
                    title="官方抖音"
                    rel="noopener"
                    >官方抖音</a
                  >
                </div>
                <div class="col-3">
                  <img
                    src="/assets/images/jubao.jpg"
                    class="img-fluid"
                    alt="廉洁举报中心"
                  />
                  <br />
                  <a
                    href="http://szxingaojiao.com/Z_WX/15_Report/ReportMain.aspx?schoolName=郑州城市职业学院"
                    title="廉洁举报中心"
                    rel="noopener"
                    >廉洁举报中心</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </main>

    <div class="fivebar">
      <a href="#">
        <span class="bg"></span>
        <span class="text">专业</span>
      </a>
      <a href="#">
        <span class="bg"></span>
        <span class="text">师资</span>
      </a>
      <a href="#">
        <span class="bg"></span>
        <span class="text">就业</span>
      </a>
      <a href="#" class="active">
        <span class="bg"></span>
        <span class="text">环境</span>
      </a>
      <a href="#">
        <span class="bg"></span>
        <span class="text">活动</span>
      </a>
    </div>

    <!-- Scroll top -->
    <div class="btn-scroll-top" id="gotoTop" data-mobile="true">
      <svg class="progress-square w-100 h-100" viewBox="0 0 40 40">
        <path
          d="M8 1H32C35.866 1 39 4.13401 39 8V32C39 35.866 35.866 39 32 39H8C4.13401 39 1 35.866 1 32V8C1 4.13401 4.13401 1 8 1Z"
        ></path>
      </svg>
    </div>
    <script>
      var nvmOptions = {
        jsFolder: "/assets/js/",
        cssFolder: "/assets/css/",
        bdhmID: "186aa1bb1368d7e0c66d1ea6e3f590ad",
      };
    </script>
    <script src="/assets/js/theme.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        let selector = document.querySelectorAll("video");

        if (selector) {
          selector.forEach(function (element) {
            if (document.body.classList.contains("device-up-md")) {
              element.addEventListener("mouseover", function (e) {
                element.play();
              });

              element.addEventListener("mouseout", function (e) {
                element.pause();
              });
            }
            element.addEventListener("playing", function (e) {
              element.play();
              selector.forEach(function (clip) {
                if (element !== clip) {
                  clip.pause();
                }
              });
            });
          });
        }
      });
    </script>
  </body>
</html>
